{% extends "vueAdmin/base_site.html" %}
{% load i18n static vueAdmin_list vueAdmin_urls vueAdmin_sets %}

{# site stylesheet section #}
{% block extrastyle %}
  {{ block.super }}
  <link rel="stylesheet" type="text/css" href="{% static "vueAdmin/css/pages/changelist.css" %}">
  {% if cl.formset or action_form %}
    <script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
  {% endif %}
{% endblock %}
{# site stylesheet section #}

{# addtional extra stylesheet or javascript #}
{% block extrahead %}
  {{ block.super }}
  {{ media }}
  <script type="application/javascript">
    window.data = {
      sources: [],
    };
    window.mixins = {
      data: function () {
        return {
          ...window.data
        }
      },
      methods: {
      }
    };
  </script>
{% endblock %}
{# addtional extra stylesheet or javascript #}

{% block x-template %}
  {% include 'vueAdmin/filter.html' %}
  {% include 'vueAdmin/components/table/index.html' %}
  {% include 'vueAdmin/components/pagination/index.html' %}
{% endblock %}

{% block content %}

  <div class="vue-content-header">
    <a-breadcrumb style="font-size: 1.2em;">
      <a-breadcrumb-item>{{ cl.opts.app_config.verbose_name }}</a-breadcrumb-item>
      <a-breadcrumb-item>{{ cl.opts.verbose_name_plural|capfirst }}</a-breadcrumb-item>
    </a-breadcrumb>

    <div class="object-tools">
      {% block object-tools %}
        <a-button-group size="small">
          {% block object-tools-items %}
            {% change_list_object_tools %}
          {% endblock %}
        </a-button-group>
      {% endblock %}
    </div>
  </div>

  <div id="content-main">
    {% if cl.formset and cl.formset.errors %}
        <p class="errornote">
        {% if cl.formset.total_error_count == 1 %}{% trans "Please correct the error below." %}{% else %}{% trans "Please correct the errors below." %}{% endif %}
        </p>
        {{ cl.formset.non_form_errors }}
    {% endif %}

    <div id="changelist">

      {% block search %}
        {% search_form cl %}
      {% endblock %}

      {% block date_hierarchy %}
        {% if cl.date_hierarchy %}
          {% date_hierarchy cl %}
        {% endif %}
      {% endblock %}

      {% block filters %}
        {% if cl.has_filters %}
          <div id="changelist-filter">
            <a-form class="ant-advanced-search-form">
              <a-row :gutter="24">
                {% for spec in cl.filter_specs %}
                  <a-col :sm="24" :md="12" :lg="8" :xl="6" :xxl="3">
                    <demo-filter-select :data='JSON.parse(`{% adv_list_filter cl spec %}`)'></demo-filter-select>
                  </a-col>
                {% endfor %}
              </a-row>
            </a-form>
          </div>
        {% endif %}
      {% endblock %}

      <form id="changelist-form" method="post" {% if cl.formset and cl.formset.is_multipart %} enctype="multipart/form-data" {% endif %} novalidate>
        {% csrf_token %}

        {% if cl.formset %}
          <div>{{ cl.formset.management_form }}</div>
        {% endif %}

        {% if action_form and cl.show_admin_actions %}
          {% admin_actions %}
        {% endif %}

        {% block result_list %}
          {% result_list cl %}
        {% endblock %}

        {% block pagination %}
          <div class="pagination">
            <demo-component-pagination></demo-component-pagination>
          </div>
        {% endblock %}
      </form>
    </div>
  </div>

{% endblock %}

{% block scripts %}
  {{ block.super }}
{% endblock %}
